
import { useEffect, useState, useContext } from 'react';
import { useLocation } from "react-router-dom";
import './index.scss'
import MyContext from '../../../../utils/myContext'
import { selectSuccess, dealOrderBtn } from '../../../../utils/cbt/sendRequset'
import { useNavigate } from "react-router-dom";
import { Popconfirm, Button, Col, Form, Input, Row, Select, theme, Divider, Radio, Table, Space, Tag, Checkbox, Pagination, Switch, message, Modal } from 'antd';
const RefundGoodsDetail = () => {
    // 路由跳转
    const navigate = useNavigate();
    let location = useLocation();
    const { state } = location;
    const store = useContext(MyContext)
    console.log("refundId", state);
    const obj = {}
    obj.order_id = store.orderDetails.key_order_id
    const [showData, setShowData] = useState({})
    const [dealType, setDealType] = useState()
    useEffect(() => {
        if (store.orderDetails.deal_state != 0) {
            //已同意或者已拒绝的状态
            selectDetails()
        }
    }, [])
    const selectDetails = () => {
        console.log("Fa送的数据", obj);
        selectSuccess(obj).then(res => {
            if (res.code == 200) {
                console.log("返回来的数据", res.data);
                setShowData(res.data[0])
            }
        })
    }
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: '住址',
            dataIndex: 'address',
            key: 'address',
        },
    ];
    const dataSource = [
        {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        },
    ];
    // 模态框的操作
    const [open, setOpen] = useState(false)

    const tailLayout = {
        wrapperCol: {
            offset: 17,
            span: 20,
        },
    };
    const handleCancel = () => {
        setOpen(false)
    };
    const onFinish = (values) => {
        // const nowTime = 
        const remarkObj = {}
        remarkObj.order_id = store.orderDetails.key_order_id
        remarkObj.key_deal_id = 2
        remarkObj.deal_state = dealType
        remarkObj.remark = values.remark
        remarkObj.deal_time = (new Date()).Format("yyyy-MM-dd HH:mm:ss")
        if (dealType == 1) {
            remarkObj.suggestion = '同意'
        } else if (dealType == 2) {
            remarkObj.suggestion = '拒绝'
        }
        dealOrderBtn(remarkObj).then(res => {
            if (res.code == 200) {
                message.success('添加备注成功')
                setOpen(false)
                if(state=='money'){
                    navigate('/index/RefundMoneyList')
                }else{
                    navigate('/index/RefundGoodsList')
                }
                
            } else {
                message.error('添加备注失败')
            }
        })
        console.log("得到的备注的值", remarkObj);
    };
    // 同意
    const agreeBtn = (deal) => {
        setOpen(true)
        setDealType(deal)
    }
    // 拒绝
    const refuseBtn = (deal) => {
        setOpen(true)
        setDealType(deal)


    }
    // 修改
    const changeBtn = (deal) => {
        setOpen(true)
        setDealType(deal)
        remarkObj.deal_state = deal
    }
    return (
        <>
            <div className='refundGoodsDetail'>
                <h1>退款申请详情</h1>
                <div className='formGoods'>
                    <div className='userBox'>
                        <Row gutter={0}>
                            <Col className="infostyle" span={4}>
                                <div className="userDetail">订单编号</div>
                                <div className="userDetail">申请状态</div>
                                <div className="userDetail">申请时间</div>
                                <div className="userDetail">用户账号</div>
                                <div className="userDetail">退款金额</div>
                                <div className="userDetail">售后类型</div>
                                <div className="userDetail">申请原因</div>
                            </Col>
                            <Col className="infostyle" span={20}>
                                <div className="userDetail1">{store.orderDetails.key_order_id}</div>
                                <div className="userDetail1">{store.orderDetails.dealStateName}</div>
                                <div className="userDetail1">{store.orderDetails.create_time}</div>
                                <div className="userDetail1">{store.orderDetails.user_phone}</div>
                                <div className="userDetail1">{store.orderDetails.refund_money}</div>
                                <div className="userDetail1">{store.orderDetails.dealTypeName}</div>
                                <div className="userDetail1">{store.orderDetails.reason}</div>

                            </Col>
                        </Row>
                    </div>
                    {
                        store.orderDetails.deal_state != 0 ?
                            < div className='deal'>
                                <Row gutter={0}>
                                    <Col className="infostyle" span={4}>
                                        <div className="userDetail">处理人</div>
                                        <div className="userDetail">处理意见</div>
                                        <div className="userDetail">处理备注</div>
                                        <div className="userDetail">处理时间</div>
                                    </Col>
                                    <Col className="infostyle" span={20}>
                                        <div className="userDetail1">{showData.dealName}</div>
                                        <div className="userDetail1">{showData.suggestion}</div>
                                        <div className="userDetail1">{showData.remark}</div>
                                        <div className="userDetail1">{showData.deal_time}</div>
                                    </Col>
                                </Row>
                            </div> : null
                    }
                </div>
                <div className='foot'>
                    <div className='btns'>
                        {
                            store.orderDetails.deal_state == 0 ?
                                <>
                                    <Button type="primary" danger onClick={() => refuseBtn(2)}>
                                        拒绝
                                    </Button>
                                    <Button type="primary" onClick={() => agreeBtn(1)}>
                                        同意
                                    </Button>
                                </> : <Button type="primary" onClick={() => changeBtn(0)}>
                                    修改备注
                                </Button>
                        }
                    </div>
                </div>
            </div >
            {/* 弹框，模态框 */}
            <Modal
                title="处理备注"
                open={open}
                onCancel={handleCancel}
                destroyOnClose='true'
                footer={null}
            >
                <Form
                    name="basic"
                    labelCol={{
                        flex: '80px',
                    }}
                    labelAlign="left"
                    labelWrap
                    wrapperCol={{
                        flex: 1,
                    }}
                    colon={false}
                    initialValues={{}}
                    onFinish={onFinish}

                >
                    <Form.Item
                        label="处理备注"
                        name="remark"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item {...tailLayout}>
                        <Button htmlType="button" onClick={handleCancel}>
                            取消
                        </Button>
                        <Button type="primary" htmlType="submit" style={{ marginLeft: '10px' }}>
                            确认
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default RefundGoodsDetail;